<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tb {
            width: 1000px;
            height: 400px;
            text-align: center;

        }
    </style>
    <script src="./jq.js"></script>
</head>

<body>
    <div class="content">
        <table border="1" class="tb">
            <thead>
                <th>全选<input type="checkbox" class="check-all"></th>
                <th>商品名称</th>
                <th>数量（件）</th>
                <th>单价（元）</th>
                <th>小计</th>
            </thead>

            <tr class="tr1">
                <td colspan="2">总计</td>
                <td class="total-num"></td>
                <td></td>
                <td class="total-price"></td>
            </tr>
        </table>
    </div>
    <script src="./list.js"></script>
</body>

</html>
<script>
    $(function () {
        var str = '';
        //保证类型是数组，可以是空数组但不能是null
        var cartList = JSON.parse(localStorage.getItem('cartList')) || [];
        var cartGoods = [];
        window.onload = function () {
            // 根据id获取购物车中的数据
            getById();
        }
        function getById() {
            if (cartList.length) {
                //购物车中的内容
                $.each(cartList, function (i, item) {
                    //item是购物车中存的id
                    $.each(list, function (num, goods) {
                        //选择购物车中的商品，存入数据
                        if (goods.id == item) {
                            goods.num = 1;//定义原始数量为1
                            goods.isChecked = false;//默认每个商品都不勾选
                            cartGoods.push(goods);//把用id获取的数据从数组的后面添入
                        }
                    })
                })
                console.log(cartGoods);
                centerTable(cartGoods);
            } else {
                // 购物车为空
                var content = '<tr><td colspan=5>购物车为空！</td></tr>';
                $('.tr1').before(content);
            }
        }
        //封装含数把需要的数据添入到页面
        function centerTable(date) {
            //定义一个空字符串
            var str = '';
            $.each(date, function (i, item) {
                str += `  <tr>
                        <td><input type="checkbox"  class='check-item'></td>
                    <td>${item.name}</td>
                    <td>${item.num}</td>
                    <td>${item.price}</td>
                <td>${item.num * item.price}</td>
                                </tr>`
            })
            $('.tr1').before(str);
        }

        //通过jq获取多选框的值
        $('.check-all').change(function () {
            //全选框为true时
            let flag = this.checked;
            //遍历cartGoods数组
            $.each(cartGoods, function (i, item) {
                //把数组里面的每个元素内的isChecked变为true
                item.isChecked = flag;
            })
            // 修改页面
            $.each($('.check-item'), function (i, item) {
                item.checked = flag;

            })
            getTotal()
        })

        $('.content').on('change', '.check-item', function () {
            var isAll = false;
            var arr = [];
            $.each($('.check-item'), function (i, item) {
                cartGoods[i].isChecked = item.checked;
                arr.push(item.checked)

            })
            //测试arr数组内的isChecked是否勾选
            isAll = arr.every(function (a) {
                return a;
            })
            //勾选全选的框
            $('.check-all').prop('checked', isAll);
            getTotal()
        })
        //计算金额和数量 给每隔个商品加一条数据，用来表示是否勾选isChecked
        function getTotal() {
            var totalNum = 0;//用还接收数量
            var totalPrice = 0;//用来接收总价格
            cartGoods.map(function (item, index) {
                if (item.isChecked) {
                    totalNum += item.num;//获取总件数
                    totalPrice += item.num * item.price;//获取总价格
                }
            })
            $('.total-num').html(totalNum + "件");
            $('.total-price').html(totalPrice.toFixed(2) + "元");//保留两位小数
        }

    })


</script>